<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Core CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/bootstrap-3.1.1.min.css" 
        data-th-href="@{/resources/css/bootstrap-3.1.1.min.css}" />
        
    <link type="text/css" rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.css" 
        data-th-href="@{/resources/font-awesome/css/font-awesome.css}" />

    <!-- SB Admin CSS - Include with every page -->
    <link type="text/css" rel="stylesheet" href="../../resources/css/sb-admin.css" 
        data-th-href="@{/resources/css/sb-admin.css}" />
    
    <style>
        .no-border-on-me>thead>tr>th,
        .no-border-on-me>tbody>tr>th,
        .no-border-on-me>tfoot>tr>th,
        .no-border-on-me>thead>tr>td,
        .no-border-on-me>tbody>tr>td,
        .no-border-on-me>tfoot>tr>td
        {
            border-top-style: none;
            border-bottom-style: none;
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    <title data-th-text="#{strategy.list.page.title}">Title</title>
</head>

<body>

<div id="wrapper">                <!-- /#wrapper -->

    <div data-th-replace="fragments/sb-admin :: top-nav"></div>
    
    <div data-th-replace="fragments/sb-admin :: vert-nav-admin"></div>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
            
				<h4 class="page-header" data-th-text="#{strategy.list.table.title}">Configured Strategies</h4>
				<div class="table responsive">
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th class="col-sm-1" data-th-text="#{strategy.list.id.label}">Id</th>
							<th class="col-sm-4" data-th-text="#{strategy.list.type.label}">Strategy Type</th>
							<th class="col-sm-4" data-th-text="#{strategy.list.name.label}">Strategy Name</th>
							<th class="col-sm-2" data-th-text="#{strategy.list.actions.label}">Action</th>
						</tr>
					</thead>
					<tbody>
						<tr data-th-each="strategy : ${strategies}">
							<td data-th-text="${strategy.id}">1</td>
							<td data-th-text="${strategy.type}">Iron Butterfly</td>
							<td data-th-text="${strategy.name}">Triple Butter</td>
							<td style="text-align: center;">
								<a href="#"	data-th-href="@{/strategy/edit(id=${strategy.id})}">
									<button type="button" class="btn btn-default btn-xs">
										<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
									</button></a> &nbsp; 
								<a href="#"	data-th-href="@{/strategy/delete(id=${strategy.id},phase=stage)}">
									<button type="button" class="btn btn-default btn-xs">
										<span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;Delete
									</button></a>
							</td>
						</tr>
						<tr data-th-remove="all">
							<td>2</td>
							<td>Iron Condor</td>
							<td>High Prob Hedged</td>
							<td style="text-align: center;">
								<a href="#">
									<button type="button" class="btn btn-default btn-xs">
										<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
									</button></a>&nbsp; 
								<a href="#">
									<button type="button" class="btn btn-default btn-xs">
										<span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;Delete
									</button></a>
							</td>
						</tr>
					</tbody>
				</table>
				</div>
				
				<br />
				
				<form class="form" action="#" data-th-action="@{/strategy/add}" data-th-object="${strategy}" method="post">
				<div class="table responsive">
					<table class="no-border-on-me table ">
						<thead>
							<tr>
								<th class="col-sm-1"></th>
								<th class="col-sm-4" data-th-text="#{strategy.list.type.label}">Strategy Type</th>
								<th class="col-sm-4" data-th-text="#{strategy.list.name.label}">Strategy Name</th>
								<th class="col-sm-2" data-th-text="#{strategy.list.actions.label}">Action</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="text" hidden="hidden" data-th-field="*{id}"></input></td>
								<td><input class="form-control" type="text"	data-th-field="*{type}" placeholder="Type"></input></td>
								<td><input class="form-control" type="text"	data-th-field="*{name}" placeholder="Name"></input></td>
								<td>
									<button type="submit" class="btn btn-primary" data-th-text="#{button.label.add.strategy}">Add Strategy</button>
								</td>
							</tr>
							<tr>
								<td class="col-sm-1"></td>
								<td class="col-sm-4 text-danger" data-th-if="${#fields.hasErrors('type')}" data-th-errors="*{type}">type error</td>
								<td class="col-sm-4 text-danger" data-th-if="${#fields.hasErrors('name')}" data-th-errors="*{name}">name error</td>
								<td class="col-sm-2"></td>
							</tr>
						</tbody>
					</table>
				</div>
				</form>
				
            </div>  <!-- /.col-lg-12 -->				
        </div>      <!-- /.row -->				
    </div>		    <!-- page wrapper -->
</div>              <!-- /#wrapper -->

        
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" src="../../resources/js/jquery-1.11.0.min.js" 
        data-th-src="@{/resources/js/jquery-1.11.0.min.js}"></script>
        
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="../../resources/js/bootstrap-3.1.1.min.js" 
        data-th-src="@{/resources/js/bootstrap-3.1.1.min.js}"></script>

    <!-- Core Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/plugins/metisMenu/jquery.metisMenu.js" 
        data-th-src="@{/resources/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
        
    <!-- SB Admin Scripts - Include with every page -->
    <script type="text/javascript" src="../../resources/js/sb-admin.js" 
        data-th-src="@{/resources/js/sb-admin.js}"></script>

</body>
</html>
